<!DOCTYPE html>
<html><head>
<style type="text/css">
	td {
		background: lightblue;
		padding: 0.5em;
	}
</style>
</head><body>

<img src="barretr_Earth.png" width="100" height="100" />

<script type="text/javascript">

function createImageWithFilter(url, w, h, filter) {
	var svgns = "http://www.w3.org/2000/svg";
	var svg = document.createElementNS(svgns, 'svg');
	svg.setAttribute('height', '100');
	svg.setAttribute('width', '100');
	svg.setAttribute('viewBox', '0 0 100 100');
	
	var defs = document.createElementNS(svgns, 'defs');
	svg.appendChild(defs);
	
	var bwF = document.createElementNS(svgns, 'filter');
	bwF.setAttribute('id', 'bw');
	defs.appendChild(bwF);
	
	var bw = document.createElementNS(svgns, 'feColorMatrix');
	//bw.setAttribute('type', 'matrix');
	//bw.setAttribute('values', '0.3333 0.3333 0.3333 0 0     0.3333  0.3333  0.3333 0 0     0.3333  0.3333  0.3333 0 0     0 0 0 1 0');
	bw.setAttribute('type', 'saturate');
	bw.setAttribute('values', '0');
	bwF.appendChild(bw);
	
	var blurF = document.createElementNS(svgns, 'filter');
	blurF.setAttribute('id', 'blur');
	defs.appendChild(blurF);
	
	var blur = document.createElementNS(svgns, 'feGaussianBlur');
	blur.setAttribute('stdDeviation', '1');
	blurF.appendChild(blur);
	
	var grayscaleBlurF = document.createElementNS(svgns, 'filter');
	grayscaleBlurF.setAttribute('id', 'grayscaleBlur');
	defs.appendChild(grayscaleBlurF);
	
	var grayscale = document.createElementNS(svgns, 'feColorMatrix');
	grayscale.setAttribute('type', 'saturate');
	grayscale.setAttribute('values', '0');
	grayscaleBlurF.appendChild(grayscale);
	
	var blur = document.createElementNS(svgns, 'feGaussianBlur');
	blur.setAttribute('stdDeviation', '1');
	grayscaleBlurF.appendChild(blur);
	
	var image = document.createElementNS(svgns, 'image');
	image.setAttribute('width', w + '');
	image.setAttribute('height', h + '');
	var xlinkns = "http://www.w3.org/1999/xlink";
	image.setAttributeNS(xlinkns, 'xlink:href', url);
	image.setAttribute('filter', 'url(#' + filter + ')');
	svg.appendChild(image);
	
	document.body.appendChild(svg);
}

createImageWithFilter('barretr_Earth.png', 100, 100, 'bw');
document.body.appendChild(document.createElement('br'));
createImageWithFilter('barretr_Earth.png', 100, 100, 'blur');
createImageWithFilter('barretr_Earth.png', 100, 100, 'grayscaleBlur');

</script>

</body></html>
